<template>
	<view class="content">
		<view class="rules" @tap="showRules">免单规则<text class="iconfont icon-bangzhu"></text></view>
		<image class="banner" mode="widthFix" src="@/static/images/special/new-background.png" alt="" />
		<!-- 新人免单列表 -->
		<view class="goods-list">
			<!-- 新人免单列表 -->
			<new-item v-for="(item, index) in list[0].goodsList" :item="item" :key="item.gid" :newPerson="userInfo.newPerson"
			 @refresh="onRefresh(list[0])"></new-item>
			<view class="skeleton-wrap" v-if="list[0].goodsList.length === 0 && !list[0].finished && !list[0].empty" v-for="i in ['a', 'b', 'c']"
			 :key="i">
				<!--商品骨架-->
				<skeleton class="goods-skeleton" avatarShape="square" :row="3" avatarSize="220rpx"></skeleton>
			</view>
			<!-- 加载中插件 -->
			<load-more :loading="list[0].loading" :finished="list[0].finished" :empty="list[0].empty"></load-more>
		</view>

		<!--回到顶部-->
		<view class="scrollTop" :class="[{ show: isShowScrollTop }]" @tap="backTop" v-if="isShowScrollTop">
			<text class="iconfont icon-huidaodingbu"></text>
		</view>

		<!-- 免单规则弹窗 -->
		<popup ref="rules" class="rules-popup">
			<view class="main">
				<text class="iconfont icon-guanbi" @tap="$refs.rules.close();"></text>
				<view class="title">新人0元购规则</view>
				<view class="text">1.活动对象：嗨返新注册用户</view>
				<view class="text">2.有效时间：自注册7天内有效</view>
				<view class="text">3.活动规则：商品数量有限，抢完为止</view>
				<view class="text">4.活动形式：用户在0元购页面-选择商品-领取淘礼金-下单即是0元，注意请拍和淘礼金金额相等的产品，超出淘礼金金额部分需要自己出资</view>
				<view class="text">5.活动期间每个用户最多享受一次补贴，多拍免单商品无补贴。</view>
				<view class="text">6.本活动与Apple Inc.无关。</view>
				<view class="text">7.本规则在法律允许范围内嗨返APP平台拥有最终解释权。</view>
			</view>
		</popup>

		<!--智能搜索-->
		<ai-search ref="aiSearch"></ai-search>
	</view>
</template>

<script>
	import loader from '@/utils/mixin/loader';
	import LoadMore from "@/components/LoadMore";
	import Skeleton from '@/components/uni/Skeleton';
	import NewItem from '@/components/special/NewItem';
	import Popup from '@/components/uni/Popup'
	import {
		mapGetters
	} from 'vuex';
	export default {
		name: 'special-new',
		components: {
			LoadMore,
			Skeleton,
			NewItem,
			Popup
		},
		mixins: [loader],
		data() {
			return {

			}
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		onLoad() {
		},
		onShow() {
			this.$nextTick(() => {
				uni.getClipboardData({
					success: res => {
						if (res.data && this.$store.state.common.aiSearch) {
							this.$refs.aiSearch.open(res.data);
							this.$store.commit({
								type: 'setAiSearch',
								aiSearch: false
							});
						}
					}
				});
			});
			// 获取用户信息
			// #ifdef H5
			this.$store.dispatch('getUserInfo', { versionCode: 140 });
			// #endif
			// #ifdef APP-PLUS
			plus.runtime.getProperty(plus.runtime.appid, wgtinfo => {
				let params = { ...wgtinfo };
				this.$store.dispatch('getUserInfo', params);
			});
			// #endif
			this.onRefresh(this.list[this.active]);
		},
		onHide() {
			this.$refs.aiSearch.close();
		},
		methods: {
			init() {
				// uni.showLoading({
				// 	title: '加载中'
				// });
				this.loadMore(this.list[0]);
			},
			// 加载前参数处理
			beforeLoad() {
				this.params.newPerson = 1;
				this.params.type = 2;

				this.service = this.$service.shopping.goods.dayAllowanceGoodsList(this.params);
				return true;
			},
			showRules() {
				this.$refs.rules.open();
			}
		}
	};
</script>

<style lang="scss" scoped>
	/deep/.load-more .finished{
		color: #fff;
	}
	.content {
		min-height: 100vh;
		background: #FF484A;
		position: relative;
		padding-bottom: 30rpx;

		.banner {
			width: 750rpx;
			height: 336rpx;
		}

		.rules {
			position: absolute;
			top: 50rpx;
			right: 0;
			color: #fdffff;
			font-size: 22rpx;
			padding: 4rpx 10rpx 4rpx 20rpx;
			border-radius: 50rpx 0 0 50rpx;
			background: rgba(0, 0, 0, 0.3);
			z-index: 10;

			.iconfont {
				margin-left: 4rpx;
				font-size: 22rpx;
			}
		}

		.goods-list {
			width: 700rpx;
			margin: 0 auto;
			min-height: 800rpx;

			.skeleton-wrap {
				padding: 0 20rpx;
				background: #fff;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
			}
		}
	}

	.rules-popup {
		.main {
			width: 600rpx;
			background: #fff;
			border-radius: 16rpx;
			padding: 20rpx;
			position: relative;

			.iconfont {
				position: absolute;
				right: 20rpx;
			}

			.title {
				font-size: 30rpx;
				text-align: center;
				margin-bottom: 20rpx;
			}

			.text {
				margin-bottom: 10rpx;
			}
		}
	}
</style>
